<template>
  <!---------- 查询表单form begin ----------->
  <a-form class="smart-query-form" size="small">
    <a-row class="smart-query-form-row">
      <a-form-item class="smart-query-form-item" label="机器查询">
        <a-select v-model:value="queryForm.machineId" :allowClear="true" :style="`width: 200px`" placeholder="机器信息查询">
          <a-select-option v-for="item in machineInfoData" :key="item.machineId" :value="item.machineId">
            {{ item.machineName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="站位查询" class="smart-query-form-item">
        <a-select v-model:value="queryForm.positionId" :allowClear="true" :style="`width: 200px`" placeholder="站位信息查询">
          <a-select-option v-for="item in machinePositionData" :key="item.positionId" :value="item.positionId">
            {{ item.positionName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="检查类型" class="smart-query-form-item">
        <a-select style="width: 200px" allow-clear v-model:value="queryForm.checkType" placeholder="请选择检查类型" :options="checkTypeOptions" />
      </a-form-item>
      <a-form-item label="检查结果" class="smart-query-form-item">
        <a-select style="width: 200px" allow-clear v-model:value="queryForm.checkResult" placeholder="请选择检查结果" :options="checkResultOptions" />
      </a-form-item>
      <a-form-item class="smart-query-form-item">
        <a-button type="primary" @click="onSearch">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button @click="resetQuery" class="smart-margin-left10">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>
  <!---------- 查询表单form end ----------->

  <a-table
    size="small"
    :scroll="{ x: 'max-content', y: 360 }"
    :dataSource="tableData"
    :columns="columns"
    rowKey="logId"
    bordered
    :loading="tableLoading"
    :pagination="false"
  >
    <template #bodyCell="{ text, record, column }">
      <template v-if="column.dataIndex === 'checkType'">
        <span>{{ $smartEnumPlugin.getDescByValue('PRODUCT_LOAD_MATERIAL_CHECK_LOG_CHECK_TYPE_ENUM', text) }}</span>
      </template>
      <template v-if="column.dataIndex === 'checkResult'">
        <span>{{ $smartEnumPlugin.getDescByValue('FLAG_BOOL_ENUM', text) }}</span>
      </template>
    </template>
  </a-table>

  <div class="smart-query-table-page">
    <a-pagination
      showSizeChanger
      showQuickJumper
      show-less-items
      :pageSizeOptions="PAGE_SIZE_OPTIONS"
      :defaultPageSize="queryForm.pageSize"
      v-model:current="queryForm.pageNum"
      v-model:pageSize="queryForm.pageSize"
      :total="total"
      @change="queryData"
      @showSizeChange="queryData"
      :show-total="(total) => `共${total}条`"
    />
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { ReloadOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import { loadMaterialCheckLogApi } from '/@/api/business/product/order/load-material-check-log-api.js';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { machinePositionInfoApi } from '/@/api/business/product/machine/machine-position-info-api.js';
  import { machineInfoApi } from '/@/api/business/product/machine/machine-info-api.js';

  const checkTypeOptions = [
    { value: 1, label: '套料' },
    { value: 2, label: '接料' },
    { value: 3, label: '巡检' },
  ];

  const checkResultOptions = [
    { value: 'true', label: '成功' },
    { value: 'false', label: '失败' },
  ];

  const columns = ref([
    {
      title: '系统中站位',
      dataIndex: 'systemRealPosition',
      ellipsis: true,
      width: '80px',
      align: 'center',
    },
    {
      title: '机器名称',
      dataIndex: 'machineName',
      ellipsis: true,
      width: '100px',
      align: 'center',
    },
    {
      title: '物料条码',
      dataIndex: 'materialBarcode',
      ellipsis: true,
      width: '150px',
      align: 'center',
    },
    {
      title: '物料编码',
      dataIndex: 'materialCode',
      ellipsis: true,
      width: '100px',
      align: 'center',
    },
    {
      title: '物料名称',
      dataIndex: 'materialName',
      ellipsis: true,
      width: '150px',
      align: 'center',
    },
    {
      title: '物料规格',
      dataIndex: 'materialSpec',
      ellipsis: true,
      width: '150px',
      align: 'center',
    },
    {
      title: '物料描述',
      dataIndex: 'materialDesc',
      ellipsis: true,
      width: '200px',
      align: 'center',
    },
    {
      title: '条码数量',
      dataIndex: 'barcodeNum',
      ellipsis: true,
      width: '80px',
      align: 'center',
    },
    {
      title: '上一个物料编码',
      dataIndex: 'previousMaterialBarcode',
      ellipsis: true,
      width: '150px',
      align: 'center',
    },
    {
      title: '检查类型',
      dataIndex: 'checkType',
      ellipsis: true,
      width: '80px',
      align: 'center',
    },
    {
      title: '是否成功',
      dataIndex: 'checkResult',
      ellipsis: true,
      width: '80px',
      align: 'center',
    },
    {
      title: '检查信息',
      dataIndex: 'checkMessage',
      ellipsis: true,
      width: '200px',
      align: 'center',
    },
    {
      title: '检查人',
      dataIndex: 'createUserName',
      ellipsis: true,
      width: '80px',
      align: 'center',
    },
    {
      title: '检查时间',
      dataIndex: 'createTime',
      ellipsis: true,
      width: '150px',
      align: 'center',
    },
  ]);

  const queryFormState = {
    planId: undefined,
    machineId: undefined,
    positionId: undefined,
    checkType: undefined,
    checkResult: undefined,
    ipqcFlag: undefined,
    pageNum: 1,
    pageSize: 10,
  };

  const queryForm = reactive({ ...queryFormState });
  const tableLoading = ref(false);
  const tableData = ref([]);
  const total = ref(0);

  function resetQuery() {
    let pageSize = queryForm.pageSize;
    Object.assign(queryForm, queryFormState);
    queryForm.pageSize = pageSize;
    queryData();
  }

  function onSearch() {
    queryForm.pageNum = 1;
    queryData();
  }

  async function queryData() {
    tableLoading.value = true;
    try {
      let queryResult = await loadMaterialCheckLogApi.queryPage(queryForm);
      tableData.value = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  function setPlanInfo(planInfo, ipqcFlag) {
    queryForm.planId = planInfo?.planId;
    planInfo.value = planInfo;
    queryForm.ipqcFlag = ipqcFlag;
    onSearch();
    loadMachineInfoData(planInfo);
    loadMachinePositionData(planInfo);
  }

  const machinePositionData = ref();

  function loadMachinePositionData(planInfo) {
    let params = {
      machineId: queryForm.machineId,
      lineId: planInfo.lineId,
    };
    machinePositionInfoApi.all(params).then((res) => {
      machinePositionData.value = res.data;
    });
  }

  const machineInfoData = ref();

  function loadMachineInfoData(planInfo) {
    debugger;
    console.log(planInfo);
    let param = {
      belongLineId: planInfo.lineId,
    };
    machineInfoApi.all(param).then((res) => {
      machineInfoData.value = res.data;
    });
  }

  defineExpose({
    setPlanInfo,
  });
</script>
